<template lang="html">
  <div v-loading="loading" class="main-panel">
    <el-table
      :data="adminTableData"
      border
      style="width: 100%"
    >
      <el-table-column
        prop="id"
        label="ID"
        width="200"
      />
      <el-table-column
        prop="username"
        label="用户名"
        width="200"
      />
      <el-table-column
        prop="nickname"
        label="昵称"
        width="200"
      />
      <el-table-column
        prop="avatar"
        label="头像"
      />
      <el-table-column
        prop="updated_at"
        label="更新时间"
        width="200"
      >
        <template slot-scope="scope">
          {{ scope.row.updated_at==''? '' : scope.row.updated_at }}
        </template>
      </el-table-column>
<!--      <el-table-column-->
<!--        prop="login_ip"-->
<!--        label="登录IP地址"-->
<!--        width="200"-->
<!--      />-->
<!--      <el-table-column-->
<!--        prop="groupInfo.name"-->
<!--        label="身份"-->
<!--      >-->

<!--        <template slot-scope="scope">-->
<!--          {{ scope.row.groupInfo.name }}-->
<!--        </template>-->
<!--      </el-table-column>-->
<!--      <el-table-column-->
<!--        prop="status"-->
<!--        label="状态"-->
<!--        width="140"-->
<!--      >-->
<!--        <template slot-scope="scope">-->
<!--          <b>-->
<!--            {{ scope.row.status===1? '' : '禁用' }}-->
<!--          </b>-->
<!--        </template>-->
<!--      </el-table-column>-->
      <!-- <el-table-column
        fixed="right"
        label="操作"
        width="100"
      >
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="handleClick(scope.row)">查看</el-button>
          <el-button type="text" size="small">编辑</el-button>
        </template>
      </el-table-column> -->
    </el-table>
    <div style="text-align:center;margin-top:20px">
      <el-pagination
        :current-page="adminTableDataPaginateCurrentPage"
        :page-sizes="adminTableDataPaginateTotalPageSizes"
        :page-size="adminTableDataPaginateTotalPageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="adminTableDataPaginateTotal"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      >
        <!-- <span>当前{{ adminTableDataPaginateCurrentPage }}页，</span>
                        <span>共{{ adminTableDataPaginateLastPage }}页</span> -->
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: false,
      adminSearchForm: {},
      adminTableData: [],
      adminTableDataPaginateCurrentPage: 1,
      adminTableDataPaginateTotal: 1,
      adminTableDataPaginateLastPage: 1,
      adminTableDataPaginateTotalPageSize: 10,
      adminTableDataPaginateTotalPageSizes: [10, 20, 50, 100]
    }
  },
  created() {
    this.getAdminList()
    // this.treeData = this.getTreeData(this.allRoute)
  },
  methods: {
    handleClick(row) {
      // console.log(row)
    },
    handleSizeChange(val) {
      // 改变每页显示的条数
      this.adminTableDataPaginateTotalPageSize = val
      this.getAdminList(1, this.adminTableDataPaginateTotalPageSize)
    },
    handleCurrentChange(val) {
      this.getAdminList(val, this.adminTableDataPaginateTotalPageSize)
    },
    getAdminList(page = 1, limit = 10) {
      this.loading = true
      this.adminSearchForm.page = page
      this.adminSearchForm.limit = limit
      this.$store.dispatch('admin/getAdminList', this.adminSearchForm).then((res) => {
        this.adminTableData = res.data.data
        this.adminTableDataPaginateTotal = res.data.total
        this.adminTableDataPaginateCurrentPage = res.data.current_page
        this.adminTableDataPaginateLastPage = res.data.last_page
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.main-panel {
  padding: 18px;
  font-size: 10px;
}
</style>
